import React from 'react';
import Router from 'next/router'
import {
    Layout, message,
    Button, Dropdown,
    Avatar, 
} from 'antd';
const { Header } = Layout;
import Cookies from 'js-cookies'
import { parseCookies, setCookie, destroyCookie } from 'nookies'
import Breadcrumb from './Breadcrumb';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PlusOutlined,
    GithubOutlined,
    UserOutlined,
} from '@ant-design/icons';
const handlerHeader = (e) => {
    if (e.key === 'item_1') {
        destroyCookie(null, 'token')
        Cookies.removeItem('token')
        Router.push('/login')
        message.success('操作成功')
    }
}
const menu = (props) => {
    props = props || {}
    let items = []
    if (props.username) {
        items.push({
            label: '个人中心',
            key: 'item_0'
        })
    }
    items.push({
        label: props.username ? '退出登录': '登录',
        key: 'item_1'
    })
    return items
}
export default (props) =>  {
    const { userinfo = {} } = props
    return <Header className="site-layout-background flex flex-row items-center justify-between"
    style={{
        backgroundColor: '#fff',
        overflow: 'auto',
        boxShadow: '0 10px 20px #e8e8e8'
        // width: !props.collapsed ? 'calc(100vw - 200px)' : 'calc(100vw - 80px)',
        // position: 'fixed',
        // zIndex: 9,
        // transition: 'all 0.3s',
        // left: !props.collapsed ? 200 : 80,
    }}
    >
    <div className='flex-2 flex flex-row items-center' >
        {React.createElement(props.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger text-lg tl',
            style: {
                marginRight: 20
            },
            onClick: props.toggle,
        })}
        {/* <SkinFilled title="主题颜色" className='trigger tl' /> */}
        <Breadcrumb {...props} />
        {/* <Button type="primary" style={{marginLeft: 10}} icon={<PlusOutlined />} onClick={() => Router.push('/article/add')}>发表文章</Button> */}
    </div>
    <div className={'userinfo text-right flex flex-3 flex-row items-center'}>
        <Button type="primary" style={{marginRight: 20}} icon={<PlusOutlined />} onClick={() => Router.push('/article/add')}>发表文章</Button>
        <Avatar className={'text-orange-f9 bg-gray-200 cursor-pointer'}
            onClick={() => window.open('https://github.com/boycot2015/nest_blog')}
            icon={<GithubOutlined />} />
        <Dropdown menu={{items: menu(userinfo), onClick: handlerHeader}} placement="bottom">
            <div className='login-cont ml-5  cursor-pointer'
                onClick={() => userinfo.username ?
                    Router.push(`/user/view?id=${userinfo.id}`)
                    : Router.push('/login?redirect=' + props.router.pathname)}
            >
                <Avatar
                    className={'mr-2 text-orange-f9 bg-gray-200'}
                    src={userinfo.avatar}
                    icon={
                        !userinfo.avatar && <UserOutlined />
                    }
                />
                <span>{userinfo.username} {userinfo.administrator && '(管理员)'}</span>
            </div>
        </Dropdown>
    </div>
    </Header>
}